import { Card, Col, Row, Statistic } from 'antd'
import React, { useEffect, useState } from 'react'
import { getShopsNum, getUsersNum } from '../../api/home'
import { UsergroupDeleteOutlined, ShoppingOutlined } from '@ant-design/icons';
type IndexProps = {}
export const  Index  = (props:IndexProps)=>{

    const [shopsNum,setShopsNum] = useState(0)
    const [usersNum,setUsersNum] = useState(0)
    // 发出接口请求
    useEffect(()=>{
        // 使用promise.all 基于数组访问
        Promise.all([getShopsNum(),getUsersNum()]).then(result=>{
            console.log(result)
            setShopsNum(result[0].data.data)
            setUsersNum(result[1].data.data)
        })
    },[])
    return (
        <>
            <Row gutter={16}>
                <Col span={6}>
                    <Card>
                        <Statistic title="商品总数量：" value={shopsNum} prefix={<ShoppingOutlined />}></Statistic>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic title="用户总数量：" value={usersNum} prefix={<UsergroupDeleteOutlined />}></Statistic>
                    </Card>
                </Col>
            </Row>
        </>
    )

}
